/* Clearfix */

nav #menu_container a#pull {
	display: none;
  background: #eee;
  margin-top: 0;
  border: 1px solid #ddd;
  padding:9px 25px 10px 25px;
  font: 155% 'Yanone Kaffeesatz',helvetica,arial,verdana,sans;
  text-shadow: 1px 1px #FFF;
  text-decoration:none;
  color: #444;
}

/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
	nav{ 
  		height: auto;
  	}
  	nav ul {
  		width: 100%;
  		display: block;
  		height: auto;
		position:relative;
  	}
  	nav li {
  		width: 50%;
  		float: left;
  		position: relative;
		border-bottom: 1px solid #576979;
		border-right: 1px solid #576979;
  	}
  	nav li a {
	}
  	nav a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 25px;
  	}
	
	
	nav ul li:hover ul{
		display:block;
		width:auto;	
	}
	nav ul li:hover ul li{
		display:block;
		width:auto;	
	}
	
	ul.sf-menu ul li { 
	  float: none; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */
	  width: auto;
		width: 100%;
		min-width: 0;
	}
	  
	ul.sf-menu ul ul { 
	  top: 0;
	  margin: 0;
		width: 100%;
		min-width: 0;
		display:block;
	}
	
	ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul, 
	ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,
	ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,
	ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul { 
	  left: none;
	  width: 100%;
		min-width: 0;
		display:block;
	}
	  
	ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,
	ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,
	ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,
	ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul { 
	  left: none;
		width: 100%;
		min-width: 0;
		display:block;
	}

	header, #logo, #main, #logo, #site_content, #content, footer,#scroll,.sidebar, input, textarea  {  
		width: 100%;
		height: auto;
		min-width: 0;
		margin-left: 0px;
		margin-right: 0px;
		padding-left: 0px;
		padding-right: 0px;	
	}
	.sidebar{
		width: auto;
		float: none;
		margin-left: 0px;
		margin-right: 0px;
	}
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
	nav {
		border-bottom: 0;
	}
	nav ul {
		display: none;
		position:relative;
		height: auto;
	}
	nav a#pull {
		display: block;
		width: 100%;
		position: relative;
	}
	nav #menu_container a#pull:after {
		content:"";
		background: url('nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
	
	.sidebar{
		width: auto;
		float: none;
		margin-left: 0px;
		margin-right: 0px;
	}
	#main, #logo, #site_content, #content, footer, #scroll, .sidebar, input, textarea  {  
		width: 100%;
		min-width: 0;
		margin-left: 0px;
		margin-right: 0px;
		padding-left: 0px;
		padding-right: 0px;	
	}
}

/*Smartphone*/
@media only screen and (max-width : 320px) {
	nav li {
		display: block;
		float: none;
		width: 100%;
	}
	nav li a {
		border-bottom: 1px solid #576979;
	}
	#main, #logo, #site_content, #content, footer, #scroll, .sidebar, input, textarea{  
		width: 100%;
		min-width: 0;
		margin-left: 0px;
		margin-right: 0px;
		padding-left: 0px;
		padding-right: 0px;	
	}
	
	.sidebar{
		width: auto;
		float: none;
		margin-left: 0px;
		margin-right: 0px;
	}	
	
	.form_settings, .form_settings input, .form_settings select, .form_settings textarea, .form_settings .submit, .form_settings .checkbox, .form_settings .radio { 
		width: 100%;
	}
}